<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, type TabsPaneContext } from 'element-plus'

// 数据变量
const activeName = ref('first') // 当前活动的标签页
const Books = ref<any[]>([]) // 用于存储从后端获取的书籍数据
const searchBooks = ref<any[]>([]) // 用于存储按书名查找的结果
const categoryBooks = ref<any[]>([]) // 用于存储按类别查找的结果

// 获取书籍数据
const fetchBooks = async () => {
  try {
    const response = await fetch('http://localhost:8080/book/list',{
      credentials:"include",
      headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    }) // 向后端发送请求
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    const data = await response.json()
    Books.value = data // 将返回的书籍数据赋值给 Books
  } catch (error) {
    console.error('Error fetching books data:', error)
    Books.value = [] // 请求失败时，清空 Books 数据
  }
}

onMounted(() => {
  fetchBooks() // 组件挂载时调用 fetchBooks 获取数据
})

// 其他表单和事件处理代码
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

//按照书名查找图书
const form = reactive({
  name: '',
})
const onSubmit = async () => {
  if (!form.name) {
    ElMessage.warning('请输入书名');
    return;
  }
  try {
    const response = await fetch(`http://localhost:8080/book/search/name?name=${form.name}`, {
      credentials: "include",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })
    if (response.ok) {
      const data = await response.json()
      searchBooks.value = data // 更新书籍数据
      form.name=''
    } else {
      ElMessage.error('未找到相关书籍')
      searchBooks.value = [] // 清空书籍数据
    }
  } catch (error) {
    console.error('Error searching books by name:', error)
    ElMessage.error('查询书籍失败')
  }
}

//按照类别查找图书
const form2 = reactive({
  category: '',
})
const onSubmit2 = async () => {
  if (!form2.category) {
    ElMessage.warning('请输入类别');
    return;
  }
  try {
    const response = await fetch(`http://localhost:8080/book/search/category?category=${form2.category}`, {
      credentials: "include",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })
    if (response.ok) {
      const data = await response.json()
      categoryBooks.value = data // 更新书籍数据
      form2.category=''
    } else {
      ElMessage.error('未找到相关类别的书籍')
      categoryBooks.value = [] // 清空书籍数据
    }
  } catch (error) {
    console.error('Error searching books by category:', error)
    ElMessage.error('查询书籍失败')
  }
}

</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="查找全部" name="first">
      <el-table :data="Books" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="Name" width="140" />
        <el-table-column prop="isbn" label="ISBN" width="140" />
        <el-table-column prop="author" label="Author" width="120" />
        <el-table-column prop="publication" label="Publication" width="150" />
        <el-table-column prop="category" label="Category" width="100" />
        <el-table-column prop="price" label="Price" width="80" />
        <el-table-column prop="introduction" label="Introduction" width="210" />
        <el-table-column prop="count" label="Count" />
      </el-table>
    </el-tab-pane>

    <el-tab-pane label="按书名查找" name="second">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="书名">
          <el-input v-model="form.name" placeholder="请输入书名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查找</el-button>
        </el-form-item>
      </el-form>
      <el-divider border-style="dashed" />
      <el-table :data="searchBooks" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="name" label="Name" width="140" />
        <el-table-column prop="isbn" label="ISBN" width="140" />
        <el-table-column prop="author" label="author" width="120" />
        <el-table-column prop="publication" label="publication" width="150" />
        <el-table-column prop="category" label="category" width="100" />
        <el-table-column prop="price" label="price" width="80" />
        <el-table-column prop="introduction" label="introduction" width="210" />
        <el-table-column prop="count" label="count" />
      </el-table>
    </el-tab-pane>

    <el-tab-pane label="按类别查找" name="third">
      <el-form :model="form2" label-width="auto" style="max-width: 600px">
        <el-form-item label="类别">
          <el-input v-model="form2.category" placeholder="请输入类别" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit2">查找</el-button>
        </el-form-item>
      </el-form>
      <el-divider border-style="dashed" />
      <el-table :data="categoryBooks" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="name" label="Name" width="140" />
        <el-table-column prop="isbn" label="ISBN" width="140" />
        <el-table-column prop="author" label="author" width="120" />
        <el-table-column prop="publication" label="publication" width="150" />
        <el-table-column prop="category" label="category" width="100" />
        <el-table-column prop="price" label="price" width="80" />
        <el-table-column prop="introduction" label="introduction" width="210" />
        <el-table-column prop="count" label="count" />
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
</style>
